<template>
  <div class="auth-container">
    <div class="auth-card">
      <div class="auth-header">
        <img src="@/assets/logo2_128.png" alt="Logo" class="logo">
        <h1>登录<span>XiusCraft</span></h1>
        <p>继续你的 Minecraft 冒险</p>
      </div>

      <form @submit.prevent="handleLogin" class="auth-form">
        <div class="input-group">
          <label>电子邮箱</label>
          <input
              type="text"
              v-model="email"
              placeholder="输入您的电子邮箱"
              required
          >
        </div>

        <div class="input-group password-group">
          <label>密码</label>
          <div class="password-input-wrapper">
            <input
                :type="showPassword ? 'text' : 'password'"
                v-model="password"
                placeholder="••••••••"
                required
            >
            <button type="button" class="toggle-password" @click="togglePassword">
              <svg v-if="showPassword" viewBox="0 0 24 24" width="20">
                <path fill="currentColor"
                      d="M12 9a3 3 0 0 1 3 3 3 3 0 0 1-3 3 3 3 0 0 1-3-3 3 3 0 0 1 3-3m0-4.5c5 0 9.27 3.11 11 7.5-1.73 4.39-6 7.5-11 7.5S2.73 16.39 1 12c1.73-4.39 6-7.5 11-7.5M3.18 12c1.43 3.26 4.7 5.5 8.82 5.5 4.13 0 7.4-2.24 8.82-5.5-1.42-3.27-4.69-5.5-8.82-5.5-4.12 0-7.39 2.23-8.82 5.5z"/>
              </svg>
              <svg v-else viewBox="0 0 24 24" width="20">
                <path fill="currentColor"
                      d="M11.83 9L15 12.16V12a3 3 0 0 0-3-3h-.17m-4.3.8l1.55 1.55c-.05.21-.08.42-.08.65a3 3 0 0 0 3 3c.22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53a5 5 0 0 1-5-5c0-.79.2-1.53.53-2.2M2 4.27l.28.28 3 3A9.96 9.96 0 0 0 2 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l3 3 .28.28-1.27 1.28L19 20.72 3.27 5M12 7a5 5 0 0 1 5 5c0 .64-.13 1.26-.36 1.82l2.93 2.93c1.5-1.25 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-4 .7l2.17 2.15C10.74 7.13 11.35 7 12 7z"/>
              </svg>
            </button>
          </div>
          <a href="/forgot-password" class="forgot-link">忘记密码?</a>
        </div>

        <button type="submit" class="auth-btn primary">
          <span>登录</span>
          <svg viewBox="0 0 24 24" width="20">
            <path fill="currentColor"
                  d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z"/>
          </svg>
        </button>

        <div class="auth-divider">
          <span>或</span>
        </div>

        <button type="button" class="auth-btn secondary">
          <img src="@/assets/logo_128.png" alt="Microsoft" width="20">
          <span>使用 Microsoft 登录</span>
        </button>
      </form>

      <div class="auth-footer">
        <p>新用户?
          <router-link to="/register">注册账号</router-link>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import {h, ref} from 'vue'
import {useRouter} from 'vue-router'
import {loginByPassword} from "@/api/login.js";
import {ElMessage} from "element-plus";

const router = useRouter()
const email = ref('')
const password = ref('')
const showPassword = ref(false)

const togglePassword = () => {
  showPassword.value = !showPassword.value
}

const MdiFontIcon = (iconName, color = '#67C23A', size = '1em') => {
  return h('i', {
    class: `mdi mdi-${iconName}`,
    style: {
      color,
      fontSize: size,
      marginRight: '8px',
      verticalAlign: 'middle'
    }
  })
}


const handleLogin = () => {
  loginByPassword(email.value, password.value).then(res => {
    if (res.success) {
      router.push('/dashboard')
      ElMessage.success({
        message: '登录成功',
        icon: MdiFontIcon('account-circle')
      })
    } else {
      ElMessage.error('登录失败，请检查账号密码是否正确.')
    }
  })

}
</script>

<style scoped>
/* 基础重置 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 主容器 */
.auth-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at top, #0a0a1a 0%, #0a0a0a 100%);
  padding: 20px;
  overflow: auto;
}

/* 登录卡片 */
.auth-card {
  width: 100%;
  max-width: 420px;
  min-width: 300px;
  background: rgba(20, 20, 30, 0.8);
  border-radius: 12px;
  padding: 2.5rem;
  border: 1px solid rgba(68, 170, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  margin: auto;
  box-sizing: border-box;
}

/* 头部样式 */
.auth-header {
  text-align: center;
  margin-bottom: 2rem;
}

.logo {
  width: 80px;
  height: 80px;
  margin-bottom: 1rem;
  object-fit: contain;
}

h1 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: #e0e0e0;
  white-space: nowrap;
}

h1 span {
  background: linear-gradient(90deg, #44aaff, #8844ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.auth-header p {
  color: #aaa;
  margin: 0;
}

/* 表单样式 */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.input-group label {
  color: #e0e0e0;
  font-size: 0.9rem;
}

.input-group input {
  padding: 0.8rem 1rem;
  background: rgba(10, 10, 20, 0.8);
  border: 1px solid rgba(68, 170, 255, 0.2);
  border-radius: 6px;
  color: white;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.input-group input:focus {
  outline: none;
  border-color: #44aaff;
  box-shadow: 0 0 0 2px rgba(68, 170, 255, 0.2);
}

/* 密码输入框特殊样式 */
.password-group {
  position: relative;
}

.password-input-wrapper {
  position: relative;
}

.password-input-wrapper input {
  padding-right: 40px; /* 给切换按钮留空间 */
}

.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 5px;
  cursor: pointer;
  color: #aaa;
}

.toggle-password:hover {
  color: #44aaff;
}

.toggle-password svg {
  display: block;
}

.forgot-link {
  align-self: flex-end;
  font-size: 0.8rem;
  color: #aaa;
  text-decoration: none;
  transition: color 0.3s;
}

.forgot-link:hover {
  color: #44aaff;
}

/* 按钮样式 */
.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 0.8rem;
  border-radius: 6px;
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s;
  width: 100%;
  border: none;
}

.auth-btn.primary {
  background: linear-gradient(90deg, #44aaff, #8844ff);
  color: #0a0a0a;
}

.auth-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(68, 170, 255, 0.3);
}

.auth-btn.secondary {
  background: transparent;
  color: #e0e0e0;
  border: 1px solid rgba(68, 170, 255, 0.5);
}

.auth-btn.secondary:hover {
  background: rgba(68, 170, 255, 0.1);
}

/* 分割线 */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #666;
  font-size: 0.9rem;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

/* 页脚 */
.auth-footer {
  text-align: center;
  margin-top: 2rem;
  color: #666;
  font-size: 0.9rem;
}

.auth-footer a {
  color: #44aaff;
  text-decoration: none;
  font-weight: 500;
}

/* 响应式处理 */
@media (max-height: 600px) {
  .auth-container {
    align-items: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .auth-card {
    margin-top: 0;
    margin-bottom: 0;
  }
}

@media (max-width: 480px) {
  .auth-container {
    padding: 10px;
  }

  .auth-card {
    padding: 1.5rem;
  }
}
</style>